<template>
    <view class="form">
        <uni-section title="基本信息" type="line">
            <view style="padding: 0 15px;">
                <up-form labelPosition="top" :model="form" ref="uFormRef" :rules="rules">
                    <up-form-item label="姓名" labelWidth="60" prop="name" required>
                        <up-input v-model="form.name" placeholder="请输入姓名" clearable></up-input>
                    </up-form-item>
                    <up-form-item label="手机号" labelWidth="60" prop="phone" type="number" required>
                        <up-input v-model="form.phone" placeholder="请输入手机号" clearable maxlength="11"></up-input>
                    </up-form-item>
                    <up-form-item label="地址" labelWidth="100" prop="address" required>
                        <up-input v-model="form.address" placeholder="请输入地址" clearable maxlength="60"></up-input>
                    </up-form-item>
                    <up-form-item label="预约时间" labelWidth="100" prop="appointment_time" required>
                        <up-text type="primary" :text="data.appointment_time ? data.appointment_time : '请选择预约时间'"
                            @click="data.show = true"></up-text>
                        <u-calendar :show="data.show" :mode="mode" @confirm="confirm" title="选择日期"></u-calendar>
                    </up-form-item>
                </up-form>
                <view class="btn-save">
                    <up-button text="提交预约" type="primary" @click="submit"></up-button>
                </view>
            </view>
        </uni-section>
        <up-toast ref="uToastRef"></up-toast>
    </view>
</template>

<script setup>

import { ref, reactive } from 'vue';
import { useStore } from "vuex"
const store = useStore()
const data = reactive({
    show: false,
    appointment_time: ''
})
const form = ref({
    name: '',
});
const rules = {
    'name': [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    ],
    'phone': [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    'address': [
        { required: true, message: '请输入地址', trigger: 'blur' },
        { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
    ]
};
const mode = ref('single');
const uFormRef = ref(null);
const confirm = (e) => {
    data.appointment_time = e[0];
    data.show = false;
};
async function submit() {
    let valid = await uFormRef.value.validate().catch(err => {
        //自定义catch方法，返回验证结果
        console.log('表单验证失败');
        return err
    })
    //验证通过返回true
    if (valid === true) {
        console.log(form.value, data.appointment_time);
        if (!data.appointment_time) {
            uni.showToast({
                title: '请选择预约时间',
                icon: 'none'
            });
            return;
        }
        const res = await store.dispatch('request', {
            url: store.state.api.appointment,
            method: 'post',
            data: {
                name: form.value.name,
                phone: form.value.phone,
                address: form.value.address,
                appointment_time: data.appointment_time
            }
        })
        if (res.code === 1) {
            uni.showToast({
                title: '提交成功',
                icon: 'success'
            });
            setTimeout(() => {
                uni.navigateBack()
            }, 1000)
            return true;
        }

        //验证通过的代码
    }
}
</script>

<style lang="scss" scoped>
.form {
    background-color: white;
    height: 100vh;

    .btn-save {
        width: 300rpx;
        margin: 0 auto;
        margin-top: 100rpx;
    }
}
</style>
